<template>
  <div class="grid-auto-flow">
    <h3>grid-auto-flow用法</h3>
    <div class="grid-auto-flow-content">
      <div v-for="item in 9" :key="item" :class="'item' + item">{{ item }}</div>
    </div>
    <pre>
      <span class="remarks">>grid-auto-flow用法</span>
      grid-auto-flow: row | column | row dense | column dense;
      row: 先行后列，默认值。
      column: 先列后行。
      row dense: 先行后列，尽可能紧密填满，尽量不出现空格。
      column dense: 先列后行，尽可能紧密填满，尽量不出现空格。
    </pre>
  </div>
</template>
<script>
import { getRandomColor } from '@/utils/index'
export default {
  name: 'GridAutoFlow',
  data() {
    return {}
  },
  mounted() {
    this.getItemColor()
  },
  methods: {
    getItemColor() {
      setTimeout(() => {
        document
          .querySelector('.grid-auto-flow-content')
          .childNodes.forEach((item) => {
            item.style.backgroundColor = getRandomColor()
          })
      }, 0)
    },
  },
}
</script>
<style lang="less" scoped>
.grid-auto-flow {
  &-content {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: row dense;
    grid-template-areas:
      'a a c'
      'b b e'
      'f g h';
    gap: 5px;
    margin: 10px 0;
    div {
      height: 100px;
      font-size: 20px;
      font-weight: bold;
      line-height: 100px;
      text-align: center;
    }
    .item1 {
      grid-area: a;
    }
    .item2 {
      grid-area: b;
    }
  }
  .remarks {
    color: red;
    font-weight: bold;
  }
}
</style>
